<template>
  <div class="Header-content">
    <div class="Logo">
      <!-- <img src="@/assets/logo.png" v-if="!isMobile" /> -->
    </div>
    <!-- 导航栏 -->
    <el-menu
      :default-active="activeIndex"
      :style="HeaderStyle"
      class="Header"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item
        v-if="openingModuleList.find(item => item == 'article')"
        class="Header-menu"
        index="1"
        >博客</el-menu-item
      >
      <el-menu-item
        v-if="openingModuleList.find(item => item == 'musicScore')"
        class="Header-menu"
        index="2"
        >乐谱</el-menu-item
      >
      <el-menu-item
        v-if="openingModuleList.find(item => item == 'video')"
        class="Header-menu"
        index="3"
        >视频</el-menu-item
      >
      <el-menu-item
        v-if="openingModuleList.find(item => item == 'document')"
        class="Header-menu"
        index="4"
        >文档</el-menu-item
      >
      <!-- 用户 -->
      <el-submenu index="5">
        <template slot="title">{{
          userInfo.name ? userInfo.name : '用户'
        }}</template>
        <el-menu-item class="publish-header" index="5-1">资源管理</el-menu-item>
        <el-menu-item class="publish-header" index="5-2">我的主页</el-menu-item>
        <el-menu-item class="publish-header" index="5-3">退出登录</el-menu-item>
      </el-submenu>

      <!-- 搜索 -->
      <SearchBar class="searchBar" />

      <el-dropdown class="Header-Write" v-if="!isMobile">
        <el-button class="publishBtn">发布</el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-if="openingModuleList.find(item => item == 'article')"
            @click.native="GoPublishArticlePage"
            >发布文章
          </el-dropdown-item>
          <el-dropdown-item
            v-if="openingModuleList.find(item => item == 'musicScore')"
            @click.native="GoPublishMusicScorePage"
            >发布乐谱
          </el-dropdown-item>
          <el-dropdown-item
            v-if="openingModuleList.find(item => item == 'video')"
            @click.native="GoPublishVideoPage"
            >发布视频</el-dropdown-item
          >
          <el-dropdown-item
            v-if="openingModuleList.find(item => item == 'document')"
            @click.native="GoPublishDocumentPage"
            >发布文档</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </el-menu>
  </div>
</template>

<script>
// 引入组件
import SearchBar from './SearchBar.vue'
import {
  setActiveIndex,
  getActiveIndex,
  removeActiveIndex
} from '@/utils/Storage'
export default {
  name: 'Header',
  props: {},
  components: {
    SearchBar
  },
  data() {
    return {
      activeIndex: '1', // 激活索引
      PublishDrawer: false,
      userInfo: {},
      openingModuleList: []
    }
  },
  computed: {
    userinfo() {
      return this.$store.state.user.userInfo
    },
    isMobile() {
      return this.$data.isMobile
    },
    HeaderStyle() {
      // 手机端的样式
      if (this.Mobile) {
        return {
          'font-size': '20px',
          color: 'black'
        }
      }
    }
  },
  watch: {},
  created() {},
  watch: {
    userinfo: {
      immediate: true,
      deep: true,
      handler(val) {
        console.log('change', val)
        this.userInfo = val
      }
    }
  },
  beforeDestroy() {
    removeActiveIndex()
  },
  mounted() {
    this.$nextTick(() => {
      this.activeIndex = getActiveIndex()
      this.getUserInfo()

    })
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      this.$store.dispatch('user/GetUserInfo').then(() => {
        this.userInfo = this.$store.state.user.userInfo
        this.openingModuleList=this.$store.state.paid.openingModuleList
      })
    },
    handleSelect(key) {
      this.activeIndex = key
      // 临时存储激活索引
      setActiveIndex(key)
      // 根据导航栏选择功能
      switch (key) {
        // 文章
        case '1':
          this.$router.push('/article')
          break
        case '2':
          this.$router.push('/musicScore')
          break
        // 视频
        case '3':
          this.$router.push('/video')
          break
        // 说明
        case '4':
          this.$router.push('/document')
          break
        // 个人信息修改
        case '5-1':
          this.$router.push('/individual/center')
          break
        // 忘记密码
        case '5-2':
          // this.$router.push(`homepage/${this.userInfo.id}`)
          this.$router.push(`/homepage/${this.userInfo.id}`)
          break
        // 退出登录
        case '5-3':
          this.$store.dispatch('user/LogOut').then(() => {
            this.$router.push('/login')
          })
          // 回到登陆页面
          // this.$router.push("/login")
          break
      }
    },
    // 进入发布文章页面
    GoPublishArticlePage() {
      console.log('GO')
      this.$router.push('/publisharticle')
    },
    // 进入发布视频页面
    GoPublishVideoPage() {
      console.log('GO')
      this.$router.push('/publishvideo')
    },
    // 进入发布文档页面
    GoPublishDocumentPage() {
      this.$router.push('/publishdocument')
    },
    GoPublishMusicScorePage() {
      this.$router.push('/publishmusicScore')
    }
  }
}
</script>

<style scoped>
.Header-content {
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px 1px rgba(0, 0, 0, 0.18);
  display: flex;
  justify-content: center;
  overflow: auto;
  position: relative;
}
.Logo {
  position: absolute;
  z-index: 9999;
  left: 0.1rem;
  top: 0.2rem;
}
.Logo img {
  max-width: 60px;
}
.Header {
  /* font-family: 'Sigmar One', cursive; */
  width: 70%;
  font-size: 17px;
  color: #333;
  display: flex;
}
.Header-menu:hover,
.Header-menu:active {
  background-color: red;
}
.searchBar {
  margin-left: auto;
}
.Header-Write {
  width: 100px;
  /* height: 0.6rem; */

  margin: auto 0px auto 10px;
}
.drawer-content {
  width: 100%;
  display: flex;
  justify-content: center;
}
.publishBtn {
  background-color: #0064fa;
  color: #fff;
  height: 0.6rem;
  line-height: 0.4em;
  margin: 4px;
  text-align: center;
}

.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #0077fa;
  color: #e7fffe;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 4px solid #0064fa;
}
@media screen and (max-width: 767px) {
  .Header-content {
    justify-content: flex-start;
    padding: 10px;
    overflow: hidden;
  }
.el-menu.el-menu--horizontal{
  border:none;
}
  .Header {
    width: 100%;
    font-size: 14px;
    flex-direction: row;
    align-items: flex-start;
  }
  .Header-menu {
    width: 30%;
    margin-right: 10px;
    padding: 0px;
    text-align: center;
  }
  .searchBar {
  }

  .Header-Write {
    display: none;
  }
}
</style>
